<script>
// 方案
import img from '../../assets/dashboard/logowhite.png';
export default {
  name: 'Case',
  data() {
    return {
      myvizlist: [
        {
          id: 't001',
          name: '智慧国土',
          alterTime: '2017/01/01',
          img: this.getBase64Image('2.jpg'),
        },
        {
          id: 't002',
          name: '智慧国土',
          alterTime: '2017/01/01',
          img: this.getBase64Image('2.jpg'),
        },
        {
          id: 't003',
          name: '智慧国土',
          alterTime: '2017/01/01',
          img: this.getBase64Image('2.jpg'),
        },
        {
          id: 't004',
          name: '智慧国土',
          alterTime: '2017/01/01',
          img: this.getBase64Image('2.jpg'),
        },
        {
          id: 't005',
          name: '智慧国土',
          alterTime: '2017/01/01',
          img: this.getBase64Image('2.jpg'),
        },
        {
          id: 't006',
          name: '智慧国土',
          alterTime: '2017/01/01',
          img: this.getBase64Image('2.jpg'),
        },
        {
          id: 't007',
          name: '智慧国土',
          alterTime: '2017/01/01',
          img: this.getBase64Image('2.jpg'),
        },
        {
          id: 't008',
          name: '智慧国土',
          alterTime: '2017/01/01',
          img: this.getBase64Image('2.jpg'),
        },
        {
          id: 't009',
          name: '智慧国土',
          alterTime: '2017/01/01',
          img: this.getBase64Image('2.jpg'),
        },
      ],
    };
  },
  methods: {
    //将图片转换为base64格式
    getBase64Image(imageName) {
      return require(`../../assets/covers/${imageName}`);
    },
  },
};
</script>
<template>
  <div>
    <h1 class="caseTitle">方案列表</h1>
    <div class="case">
      <Row
        type="flex"
        justify="start"
        class="code-row-bg">
        <Card
          v-for="item in myvizlist"
          :key="item.id"
          class="card itemCard"
        >
          <div>
            <img :src="item.img">
            <h4>{{ item.name }}</h4>
          </div>
        </Card>
      </Row>
      <div class="more">
        <Button>查看更多</Button>
      </div>
    </div>
  </div>
  </div>
</template>
<style lang="less" scoped>
.case {
  text-align: center;
  height: calc(~'100vh - 180px');
  /deep/.k-card-body {
    padding: 0;
  }
  .k-card-body .datav-case-card {
    background-color: #57a3f3;
    img {
      margin: 20px 0;
      width: 140px;
      height: auto;
    }
    h4 {
      color: #fff;
    }
  }
  .card {
    width: 30%;
    height: 30%;
    margin: 10px 26px;
    cursor: pointer;
  }

  .newCard {
    border: 2px dotted #1c2438;
    background-color: #4ea0f1;
  }

  .newCard img {
    width: 80px;
    height: auto;
  }

  .itemCard img {
    width: 150px;
    height: 100px;
  }

  .itemCard h4 {
    margin: 6px 0 0 0;
    text-align: center;
    color: dodgerblue;
  }

  .itemCard h6 {
    text-align: right;
  }
}

.caseTitle {
  margin-top: 20px;
  text-align: center;
}

.more {
  text-align: center;
}
</style>
